<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
    <router-link to="/">返回列表</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const articles = [
  { id: 1, title: '第一篇文章', content: '这是第一篇文章的内容。' },
  { id: 2, title: '第二篇文章', content: '这是第二篇文章的内容。' },
  { id: 3, title: '第三篇文章', content: '这是第三篇文章的内容。' },
];

const route = useRoute();
const article = ref({});

onMounted(() => {
  const articleId = parseInt(route.params.id, 10);
  article.value = articles.find((a) => a.id === articleId) || {};
});
</script>

<style>
h1 {
  margin-top: 20px;
}
</style>
